{% extends "base_portadmin.html" %}

{% block mainheading %}List of CSTs for {{ portfolio }}{% endblock %}

{% block content %}

	<table id="MainTable" width="100%" border="1">
		<tr id="Tr_0">
			<th width="20">Monthes</th>
		</tr>
		{% for month in monthes %}
			<tr id="Tr_{{ month }}">
				<th>{{ month }}</th>
			</tr>
		{% endfor %}
	</table>

    <div>
        <input type="button" onclick="OnAddPortfolioCstClicked(); return false;" value="Add" />
    </div>


	<select id="CstSelect" name="cst" style="width: 70px; font-size: 10px;" onchange="OnCstIdChanged(jQuery(this));">
		<option value="0">choose</option>
		{% for cst in csts %}
			<option value="{{ cst.pk }}">{{ cst.name }}</option>
		{% empty %}
			<option value="0" style="color: red">ERROR</option>
		{% endfor %}
	</select>


<div id="MainPopupMask" style="background: red; position: absolute; z-index: 9000; top: 0px; left: 0px; background: #000000;"></div>
<div id="MainPopupDiv" class="xxxxx" style="width: 570px; height: 20px; display: none; position: absolute; z-index: 9999;">
    <div id="MainPopupContent">...</div>
</div>

<script type="text/javascript">

	// ID for new div/line
	var gTotalLines = 1;

	var gIsDataLoaded = true;
    
    // Dimension of screen
    var gMaskW = 0;
    var gMaskH = 0;

	// On which button(ex div) was clicked
    var gDivClicked = null;
    
    var gArColumnColors = new Array();
    gArColumnColors[0] = "lightgray";
    gArColumnColors[1] = "white";
    gArColumnColors["forex"] = "{{ forex_color }}";

	// Stores ID of CSTs for each row
	var gArCstIds = new Array();

    window.onload = function()
    {
        //Get the screen height and width to fade w/ mask
        gMaskW = jQuery(document).width();
        gMaskH = jQuery(document).height();
     
        jQuery("#MainPopupMask").click(function(){
            jQuery(this).hide();
            jQuery("#MainPopupDiv").hide();
        }); 
     
        AddNewPortfolioCst();
        SetColumnColor(1, gArColumnColors["forex"]);
    }

    function SetColumnColor(columnNr, color)
    {
        for( var i = 1; i < 13; i++ )
        {
            var tdId = (columnNr - 1) * 12 + i;
            jQuery("#Td_" + tdId).css("background-color", color);
        }
    }

	var gTdClicked = 0;
	function OnPortfolioMonthClicked(tdId, rowNr, cstId)
	{
		//alert("Row #:" + rowNr);
		//alert("Selected CST for this row: " + gArCstIds[rowNr]);
		selectedCstId = parseInt(gArCstIds[rowNr]);
		if( isNaN(selectedCstId) )
		{
			selectedCstId = 0;
		}
		
		//alert("ID of selected CST is: " + selectedCstId);
		if( selectedCstId < 1 )
		{
			alert("You should select CST for current row!");
			return false;
		}
        //alert("Month clicked: " + div.attr("alt"));
        //alert("Parent: " + div.parent().attr("id"));
        //gDivClicked = div;
		gTdClicked = tdId;
		var month = tdId - rowNr * 12;
		OnLoadMainPopup("/test/getcstforport/" + selectedCstId, 200, 150, 0, 0);
	}
    
    var gNewId = 1;
    function OnAddCstToPortfolioClicked(obj)
    {
        OnCloseMainPopupClicked();
        if( gTdClicked > 0 )
        {
            jQuery("#Td_" + gTdClicked).html("<a href='#' onclick='alert(\"" + gNewId + "\"); return false;'><img src='http://jrc.play-and-think.com/images/information.png' alt='Information' /></a>");
			gNewId++;
        }
        alert("CST information is added to Portfolio");
    }

    function OnAddPortfolioCstClicked()
    {
        AddNewPortfolioCst();
    }
    
    function AddNewPortfolioCst()
    {
		var tdId = 0;
		jQuery("#Tr_0").append("<td id='TdCst_" + gTotalLines + "'></td>");
		for( var i = 1; i < 13; i++ )
		{
			tdId = (gTotalLines - 1) * 12 + i;
			jQuery("#Tr_" + i).append("<td id='Td_" + tdId + "'><a href='#' onclick='OnPortfolioMonthClicked(" + tdId + ", " + gTotalLines + ", 0); return false;'><img src='http://jrc.play-and-think.com/images/appadd.png' alt='Add new' width='16' height='16' border='0' /></a></td>");
		}
		jQuery("#TdCst_" + gTotalLines).append( jQuery("#CstSelect").clone().attr("name", "cst_" + gTotalLines).show() );

		gTotalLines++;
    }

	function OnCstIdChanged(cstSelect)
	{
		//alert(cstSelect.attr("name").substr(4));
		// In which row CST was changed
		var row = parseInt(cstSelect.attr("name").substr(4));
		//var selectedId = parseInt(gArCstIds[row]);
		gArCstIds[row] = cstSelect.val();
	}

</script>
<script type="text/javascript" src="http://jrc.play-and-think.com/js/jrc.js"></script>

{% endblock %}
